<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <title>搜索店铺</title>
</head>
<style>

    #UL{
        position: absolute;
        background:rgba(0,0,0,0.4);
        background-size: 100% 100%;
        width: 40px;
        padding: 2% 0 2% 0;
        text-align: center;
        display: block;
        z-index: 9;
        font-size: 12px;
        line-height: 18px;
        padding: 3px 0;
        /*margin-top: -10px;*/
        top:28px;
        border-radius: 2px;
    }
    li>a{
        color:white;
    }
    .selected>a{
        color: white;
    }
    header {
        width: 100%;
        height: 50px;
        position: relative;
        text-align: center;
        background: white;
    }
    .header_search{
        width: 94%;
        margin: 0px auto;
        padding-top: 10px;
    }
    .back_up{
        display: table-cell;
        padding-right: 28px;
        position: relative;
    }
    .back_up img{
        width: 11px;
        height: 19px;
        position: absolute;
        top:50%;
        margin-top: -9.5px;
        left:0;
    }
    .header_cate{
        width: 100%;
        display: table-cell;
        background: #F6F6F6;
        border-radius: 6px;
        font-size: 12px;
        line-height: 26px;
    }
    .header_cate table{
        width: 100%;
        border-radius: 4px;
    }
    .header_cate .group{
        width:50px;
    }
    .header_cate .group select{
        width: 60px;
        text-align: center;
        background: none;
        border: none;
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        color: #333;
        outline: none;
    }
    .header_cate .group select option{
        outline: none;
        border: none;
        background: transparent;
        padding: 0;
        color: #333;
        -webkit-appearance: none;
    }
    .header_cate .text input{
        display: block;
        width: 100%;
        background: none;
        border: none;
        outline: none;
        font-size: 12px;
        color:#333;
        text-indent: 10px;
    }
    .header_cate .text input::-webkit-input-placeholder{
        color:#333;
    }
    .header_search label{
        display: table-cell;
        padding-left: 15px;
        font-size: 14px;
        line-height: 30px;
        color: #333;
        margin-bottom: 0;
        font-weight: normal;
    }
    .header_search label span{
        display: block;
        width: 30px;
        float: right;
    }
</style>
<body>
<div class="wrap-type1">
    <div class="header">

        <img src="__STATIC__/img_user/back.png" class="back" onclick=window.location.href="{:url('mobile/user_category/search')}">
        <div>
            <input type="search" placeholder="请输入搜索关键字" id="keyword"  value="{:input('search','')}" onfocus="$('#UL').css({'display':'none'})" >
            <img style="position: absolute;float: right;width: 5%;top: 18px;margin-left: 90%" onclick="jump()" src="__STATIC__/img_user/fl-sousuotubiao.png" onclick="jump()">
            <p><span style="color: #A4A4A4;" id="search">{eq name=":input('type',1)" value='1'}商品{else/}店铺{/eq}</span><img src="__STATIC__/img_user/fl-xiatubiao.png" onclick="toggle_type()"></p>
            <ul  id="UL" style="display: none;">
                <input type="hidden" id="result" {eq name=":input('type',1)" value='1'}value="1"{else/}value="2"{/eq} />
                <li class="ys selected"><a href="javascript:change(1);" id="order_id">商品</a></li>
                <li class="ys" ><a href="javascript:change(2);" id="title_id">店铺</a></li>
            </ul>
        </div>
    </div>




    <div class="center">
        {volist name='arr' id='v'}
        <div class="category">
            <div>
                <div class="left" style="width:80%">
                    <a><img src="/{$v.logo}" style="width: 30%;"></a>
                    <p><span><a>{$v.title}</a></span><br><span><a>{$v.collect_number}人收藏</a></span></p>
                </div>
                <div class="right">
                    <span><a href="javascript:jump_shop({$v.member_id});">进店</a></span>
                </div>
            </div>
        </div>
        {/volist}
    </div>
</div>
<script src="__STATIC__/js/layer_mobile/layer.js"></script>
<script>
    //跳转到店铺
    function jump_shop(id) {
        var url = "{:url('mobile/user_category/shop_index')}?shop_id="+id;
        sessionStorage.setItem('shop_back_url',window.location.href);
        window.location.href = url;
    }
    //跳转到商品详情
    function jump_goods(id){
        var url = "{:url('mobile/user_category/goods_details')}?goods_id="+id;
        sessionStorage.setItem('goods_url_back',window.location.href);
        window.location.href = url;
    }
    //跳转搜索结果展示页
    function jump(){
        var result = $('#result').val(),
                search = $("[type='search']").val();
        if (search == ''){
            layer.open({content:'搜索内容不能为空',skin:'msg',time:2});
            return false;
        }
        if (result == 1){  //商品
            window.location.href = "{:url('mobile/user_category/search_goods')}?search="+search;
        }else{  //店铺
            window.location.href = "{:url('mobile/user_category/search_shop')}?type=2&search="+search;
        }
    }
    function change(id){
        if (id == 1){
            $('#search').text('商品');
            $('#result').val(1);
            $('#UL').css('display','none');
            $('.ys').eq(0).addClass('selected');
            $('.ys').eq(1).removeClass('selected');
        }else{
            $('#result').val(2);
            $('#search').text('店铺');
            $('#UL').css('display','none');
            $('.ys').eq(1).addClass('selected');
            $('.ys').eq(0).removeClass('selected');
        }
    }
    function toggle_type(){
        $('#UL').toggle();
    }
</script>
</body>
</html>